<template>
  <div class="contbox6_10">
    <p class="titlelist6_10">
      首页配置
    </p>
    <div class="container content">
      <div class="boxera1">
        <div class="left" style="margin-top:20px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="轮播图列表" name="first">
              <BannerTab />
            </el-tab-pane>
            <el-tab-pane label="功能列表" name="second">
              <FunctionTab />
            </el-tab-pane>
          </el-tabs>
          <!-- <div class="clearfix">
          <div class="leftTop">
            <div class="letTopTitle" style="color: #545c75">轮播图列表</div>
            <el-button type="primary" plain>添加轮播图</el-button>
          </div>
          <div style="clear: both"></div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%; overflow-x: scroll !important"
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
          </el-table>
        </div> -->

          <div style="clear: both"></div>
          <!-- <div class="clearfix">
          <div class="leftTop">
            <div class="letTopTitle" style="color: #545c75">添加功能</div>
            <el-button type="primary" plain>添加功能</el-button>
          </div>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%; overflow-x: scroll !important"
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="180">
            </el-table-column>
          </el-table>
        </div> -->
        </div>
        <div class="rightas">
          <div class="phonePic">
            <img
              src="../../assets/images/phoneTop.png"
              style="width: 100%"
              alt=""
            />
            <div class="titles">首页</div>
            <div class="cont">
              <div class="phoneBannere">
                <div class="block" :class="activeName=='first'?'active2':''">
                  <el-carousel height="150px">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <h3 class="small">{{ item }}</h3>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
              <!-- 收益统计 -->
              <div class="profit">
                <div class="subTitle"><span class="line"></span> 收益统计</div>
                <div class="moneys"><span class="yuan">6289.10</span>元</div>
                <div class="titleTxt">
                  <span class="first">本月开通终端 122台</span>
                  <span>本月伙伴新增 666人</span>
                </div>
              </div>
              <!-- 功能菜单 -->
              <div class="phoneMenu" :class="activeName=='second'?'active2':''">
                <div class="subTitle" style="margin-bottom: 10px">
                  <span class="line"></span> 功能
                </div>
                <div class="menuList">
                  <div class="subList" v-for="(item, index) in 9" :key="index">
                    <div class="pic"></div>
                    <div class="picTitle">描述</div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <img
                src="../../assets/images/footerNav.png"
                style="width: 100%; height: 40px"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 添加轮播图弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="dialogFormHead"
        :visible.sync="dialogFormSave"
      >
        <el-form
          :model="listQuery"
          :rules="rules"
          ref="form"
          label-width="150px"
        >
          <el-row>
            <el-Col :span="24">
              <!-- <div class="imageInfos">
                    <div
                      style="width: 97%;height: 150px;line-height:150px;margin: 15px 15px 15px 15px;border: 1px #002F3F solid;text-align: center"
                    >
                      <el-image
                        :src="form.bannerPhotoPath"
                        v-if="form.bannerPhotoPath"
                        style="width: 100%;height: 150px;"
                      ></el-image>
                      <p v-show="!form.bannerPhotoPath">预览图</p>
                    </div>
                  </div> -->
              <div
                class="imageInfos"
                style="border: none; display: flex; line-height: 35px"
              >
                <el-upload
                  :action="httpurl + '/api/fileUpload'"
                  name="file"
                  list-type="picture-card"
                  :file-list="form.options"
                  :limit="1"
                  :before-upload="beforeUpload"
                  :on-success="handleSuccess"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                  <!-- <div style="">
                        <el-button size="small" type="primary"
                          >上传banner图片</el-button
                        >
                        <p style="margin-left: 10px">
                          尺寸要求:345：150，限制大小不超过 1Mb
                        </p>
                      </div> -->
                </el-upload>
                <p class="f12">尺寸要求:345：150，限制大小不超过 1Mb</p>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
            </el-Col>
            <el-Col :span="24">
              <div
                style="
                  width: 100%;
                  float: left;
                  border-bottom: 1px solid rgb(0, 0, 0);
                  margin-bottom: 15px;
                  margin-top: 20px;
                "
              ></div>
              <div class="imageInfos" style="border: none">
                <el-button
                  :type="form.jumpType == '3' ? 'primary' : ''"
                  @click="form.jumpType = '3'"
                  >跳转至图片</el-button
                >
                <el-button
                  :type="form.jumpType == '2' ? 'primary' : ''"
                  @click="form.jumpType = '2'"
                  >站内 跳转</el-button
                >
                <el-button
                  :type="form.jumpType == '4' ? 'primary' : ''"
                  @click="form.jumpType = '4'"
                  >站外 跳转</el-button
                >
              </div>
            </el-Col>
            <el-Col :span="24">
              <div v-show="form.jumpType == '3'">
                <!-- <div
                      class="imageInfos"
                      v-for="(itms, i) in form.jumpPhotos"
                      :key="i"
                    >
                      <el-image
                        style=" height: 150px;border: 1px #002F3F solid;width: 100%;"
                        :src="form.jumpPhotos[i].filePath"
                      ></el-image>
                    </div> -->
                <!-- style="line-height:150px; height: 150px;border: 1px #002F3F solid;"
                      v-if="form.jumpPhotos.length < 1"
                      action
                      ref="upload2"
                      :http-request="submitFileSave2"
                      :before-upload="beforeAvatarUpload2"
                      :show-file-list="false" -->
                <el-upload
                  class="imageInfos"
                  :action="httpurl + '/api/fileUpload'"
                  name="file"
                  list-type="picture-card"
                  :file-list="form.jumpPhotos"
                  :limit="10"
                  accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                  :before-upload="beforeUpload1"
                  :on-success="handleSuccess2"
                  :on-preview="handlePictureCardPreview2"
                  :on-remove="handleRemove2"
                >
                  <p>点击上传图片</p>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2" append-to-body>
                  <img width="100%" :src="dialogImageUrl2" alt="" />
                </el-dialog>
              </div>
              <div v-show="form.jumpType == '2'">
                <p>请选择一个跳转页面的路径进行</p>
                <el-cascader-panel
                  :options="options"
                  v-model="form.optionss"
                  :props="subCatProps"
                  @change="changes"
                  filterable
                  :show-all-levels="false"
                ></el-cascader-panel>
              </div>
              <div v-show="form.jumpType == '4'">
                <p>请选择一个跳转地址的路径进行</p>
                <el-input
                  v-model="form.jumpAddress"
                  placeholder="www.请输入跳转链接地址"
                ></el-input>
              </div>
            </el-Col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormSave = false">取 消</el-button>
          <el-button type="primary" @click="create('form')">立即应用</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BannerTab from "./components/bannerTab";
import FunctionTab from "./components/functionTab";
import { isUrl } from "../../assets/js/commion";
export default {
  components: {
    BannerTab,
    FunctionTab,
  },
  data() {
    return {
      dialogFormHead: "",
      dialogFormSave: false,
      dialogImageUrl: "",
      dialogVisible: false,
      dialogImageUrl2: "",
      dialogVisible2: false,
      // httpurl: "http://10.12.204.208:10688/",
      httpurl: this.GLOBAL.httpurl,
      form: {
        uid: undefined, //	图片id
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        bannerPhotoPath: undefined, //	banner图片地址
        jumpAddress: undefined, //	跳转地址
        jumpType: 3, //	跳转类型
        jumpPhotos: [], //	跳转图片List
        options: [],
        optionss: "",
      },
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        channelName: undefined, //	品牌名称
        channelCode: undefined, //	品牌编号
        officeType: undefined, //	机构类型
        officeName: undefined, //	机构名称
        phone: undefined, //	手机号
        status: undefined, //	状态
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        page: 1, //第几页
        number: 20, //每页几条
      },
      subCatProps: {
        value: "jumpAddress",
        label: "name",
        children: "children",
      },
      activeName: "first", //控制tab切换
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
  created() {
    this.handleSelectList();
  },
  methods: {
    handleSelectList() {
      let that = this;
      if (that.sign) {
        that.listLoading = true;
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/queryBannerList",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: that.listQuery,
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.list = res.data.data;
              that.total = res.data.total;

              that.listLoading = false;
            } else {
              that.listLoading = false;
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              // that.$notify({
              //   title: "错误",
              //   message: res.msg,
              //   type: "error"
              // });
            }
          })
          .catch((err) => {
            return;
          });
      } else {
        that
          .axios({
            //axios请求
            method: "POST",
            url: "/api/template/queryBannerPhoto",
            headers: { "Content-Type": "application/json;charset=utf-8" },
            data: { oemUid: that.listQuery.oemUid },
          })
          .then((res) => {
            if (res.data.code == "0000") {
              that.list = res.data.data;
            } else {
              layer.open({
                content: res.data.msg,
                skin: "msg",
                time: 2, //1秒后自动关闭
              });
              // that.$notify({
              //   title: "错误",
              //   message: res.msg,
              //   type: "error"
              // });
            }
          });
      }
      that
        .axios({
          //axios请求
          url: "/api/template/queryInternalJump",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
        })
        .then((res) => {
          if (res.data.code == "0000") {
            console.log("12");
            console.log(res);
            that.options = res.data.data;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // that.$notify({
            //   title: "错误",
            //   message: res.data.msg,
            //   type: "error"
            // });
          }
        });
    },
    // 立即应用点击
    create() {
      let that = this;
      console.log(that.form);
      that.$refs["form"].validate((valid) => {
        alert(valid);
        if (valid) {
          if (true) {
            if (that.form.jumpType == 2) {
              console.log(that.form.optionss);
              // return
              if (that.form.options.length >= 1 && that.form.optionss) {
                that.form.jumpPhotos = [];
                that.form.jumpAddress = that.form.optionss[0]
                  ? that.form.optionss[0]
                  : "";
                that.form.bannerPhotoPath = that.form.options[0].filePath;
                that.form.optionss = that.form.optionss[0]
                  ? that.form.optionss[0]
                  : "";
                that
                  .axios({
                    method: "POST",
                    url: "/api/template/saveBannerPhoto",
                    data: that.form,
                  })
                  .then((res) => {
                    if (res.data.code == "0000") {
                      // that.$notify({
                      //   title: "成功",
                      //   message: "保存成功",
                      //   type: "success"
                      // });
                      that.dialogFormSave = false;
                      that.handleSelectList();
                    } else {
                      layer.open({
                        content: "保存失败:" + res.data.msg,
                        skin: "msg",
                        time: 2, //1秒后自动关闭
                      });
                    }
                  });
              } else {
                layer.open({
                  content: "填写信息为空或输入错误",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
              }
            } else if (that.form.jumpType == 3) {
              console.log(that.form.options);
              // return
              if (
                that.form.options.length >= 1 &&
                that.form.jumpPhotos.length >= 1
              ) {
                that.form.jumpAddress = "";
                that.form.bannerPhotoPath = that.form.options[0].filePath;
                that.form.options = [];
                that
                  .axios({
                    method: "POST",
                    url: "/api/template/saveBannerPhoto",
                    data: that.form,
                  })
                  .then((res) => {
                    if (res.data.code == "0000") {
                      // that.$notify({
                      //   title: "成功",
                      //   message: "保存成功",
                      //   type: "success"
                      // });
                      that.dialogFormSave = false;
                      that.handleSelectList();
                    } else {
                      layer.open({
                        content: "保存失败:" + res.data.msg,
                        skin: "msg",
                        time: 2, //1秒后自动关闭
                      });
                    }
                  });
              } else {
                layer.open({
                  content: "填写信息为空或输入错误",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
              }
            } else if (that.form.jumpType == 4) {
              console.log(that.form.options);
              // return
              if (
                that.form.options.length >= 1 &&
                isUrl(that.form.jumpAddress)
              ) {
                that.form.jumpPhotos = [];
                that.form.bannerPhotoPath = that.form.options[0].filePath;
                that
                  .axios({
                    method: "POST",
                    url: "/api/template/saveBannerPhoto",
                    data: that.form,
                  })
                  .then((res) => {
                    if (res.data.code == "0000") {
                      // that.$notify({
                      //   title: "成功",
                      //   message: "保存成功",
                      //   type: "success"
                      // });
                      that.dialogFormSave = false;
                      that.handleSelectList();
                    } else {
                      layer.open({
                        content: "保存失败:" + res.data.msg,
                        skin: "msg",
                        time: 2, //1秒后自动关闭
                      });
                    }
                  });
              } else {
                layer.open({
                  content: "填写信息为空或输入错误",
                  skin: "msg",
                  time: 2, //1秒后自动关闭
                });
              }
            }
            console.log(that.form);
          } else {
            layer.open({
              content: "填写信息为空或输入错误",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
          }
        }
      });
    },
    // 图片类的
    beforeUpload(file) {
      //  ;
      // 上传图片前处理函数
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      let that = this;
      let isAllow = false;
      if (!isJPG) {
        // this.$message.error();
        layer.open({
          content: "上传头像图片只能是 jpg、png、jpeg 格式!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      if (!isLt2M) {
        layer.open({
          content: "上传头像图片大小不能超过 1Mb!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // this.$message.error();
      }
      const isSize = new Promise(function (resolve, reject) {
        let width = 345;
        let height = 140;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function () {
          // let valid = that.$commit.ImageRestrictions(
          //   image.width,
          //   image.height,
          let valid = image.width >= width && image.height >= height;
          //   3
          // );
          // let name = file.name.substring(0, file.name.lastIndexOf('.'))+'_'+image.width+'_'+image.height
          //     file = new File([file], name);

          //     const valid = this.$commit.ImageRestrictions(image.width,image.height,1)
          valid ? resolve() : reject();
          // valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          layer.open({
            content: "banner图片尺寸不符合,只能是345：150!",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          // this.$message.error();
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    handleSuccess(res, file, fileList) {
      // let islt1M = file.size / 1024 / 1024 < 0.2
      // if (!islt1M) {
      //   this.$notify({title: "错误",message: '上传图片大小不能超过200kb',type: "error"});
      //   return false
      // }
      this.file = file.url;
      let pl = {
        status: "1",
        filePath: res.data.filePath,
        url: res.data.filePath,
      };
      this.form.options.push(pl);
      console.log(this.form.options);
    },

    handlePictureCardPreview(file, fileList) {
      console.log(444, file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleRemove(file, fileList) {
      for (let i = 0; i < this.form.options.length; i++) {
        this.form.options[i].uid == file.uid && this.form.options.splice(i, 1);
        // this.options[i].status == 1
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/21
     * @annotation: 内部图片
     **/
    beforeUpload1(file) {
      // 上传图片前处理函数
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 1000;
      let that = this;
      let isAllow = false;
      if (!isJPG) {
        layer.open({
          content: "上传头像图片只能是 jpg、png、jpeg 格式!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        // that.$message.error();
      }
      if (!isLt2M) {
        // that.$message.error();
        layer.open({
          content: "上传头像图片大小不能超过 1Mb!",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
      return isJPG && isLt2M;
    },
    handleSuccess2(res, file, fileList) {
      // let islt1M = file.size / 1024 / 1024 < 0.2
      // if (!islt1M) {
      //   this.$notify({title: "错误",message: '上传图片大小不能超过200kb',type: "error"});
      //   return false
      // }
      this.file2 = file.url;
      let pl = {
        status: "1",
        filePath: res.data.filePath,
        url: res.data.filePath,
      };
      this.form.jumpPhotos.push(pl);
    },

    handlePictureCardPreview(file, fileList) {
      console.log(444, file);
      this.dialogImageUrl2 = file.url;
      this.dialogVisible2 = true;
    },
    handleRemove2(file, fileList) {
      console.log(666, this.imgData2, file);
      for (let i = 0; i < this.form.jumpPhotos.length; i++) {
        this.form.jumpPhotos[i].uid == file.uid &&
          this.form.jumpPhotos.splice(i, 1);
      }
    },
  },
};
</script>

<style scoped>
.boxera1 {
  display: flex;
  width: calc(100% - 20px);
  height: calc(100vh - 126px);
  overflow: hidden;
}
/deep/ .el-tabs__item{
  font-size: 16px;
}
.active2{
  border: 2px solid #409EFF;
}
.left {
  width: calc(100% - 400px);
  height: calc(100vh - 100px);
  overflow-y: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 0 20px;
}
.rightas {
  width: 400px;
  background: #ebeef5;
  position: relative;
  overflow-y: scroll;
}
.phonePic {
  
  width: 350px;
  background: white;
  box-sizing: border-box;
  margin: 0 auto;
}
.titles {
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  width: 100%;
}
.cont {
  background: rgb(246, 246, 246);
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-top: 10px;
}
.phoneBannere {
  background: #ccc;
  height: 150px;
  margin-bottom: 10px;
}
.moneys {
  margin: 4px 0;
}
.yuan {
  font-size: 22px;
  font-weight: 600;
  color: rgb(238, 96, 88);
}
.first {
  display: inline-block;
  margin-right: 20px;
}
.profit {
  background: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 8px;
}
.phoneMenu {
  background: white;
  margin-top: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 20px;
}
.subList {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}
.menuList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pic {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  margin: 0 auto;
}
.picTitle {
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.leftTop {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  padding: 0 20px;
}
.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: ".";
  visibility: hidden;
}
</style>